<template>
  <div class="about">
    <div class="my li">
      <h2># 关于我</h2>
      <pre>
我是一位热爱前端技术的学生
学习前端也有一年了，断断续续
虽然技术还很烂，但从未放弃！！！
        </pre
      >
    </div>
    <div class="skill">
      <h2># 个人技术</h2>
      <Skill :skillsMsg="skillsMsg" />
    </div>

    <div class="xiangmu li">
      <h2># 个人项目</h2>
      <button>后台管理</button>
      <button>个人博客</button>
    </div>
    <div class="shequ li">
      <h2># 活跃社区</h2>
      <button>Github</button>
      <button>Gitee</button>
      <button>BiliBili</button>
      <button>知乎</button>
      <button>掘金</button>
    </div>
    <div class="qita li">
      <h2># 其他</h2>
      <button>测试</button>
      <button>测试</button>
    </div>
  </div>
</template>

<script>
import Skill from "./Skill.vue";
export default {
  components: {
    Skill,
  },
  data() {
    return {
      skillsMsg: [
        {
          title: "HTML/CSS",
          skills: "65",
          content: "熟练使用 HTML + CSS 制作网站",
        },
        {
          title: "JavaScript",
          skills: "50",
          content: "熟练使用 JavaScript 进行网页开发",
        },
        {
          title: "bootstrap",
          skills: "70",
          content: "熟悉 bootstrap 进行响应式开发",
        },
        {
          title: "Vue",
          skills: "60",
          content: "熟练使用 Vue 全家桶开发项目，了解 Vue 响应式原理",
        },

        {
          title: "ES",
          skills: "40",
          content: "掌握 ES，能在项目中使用 ES 进行开发",
        },
        {
          title: "Webpack/Vite",
          skills: "30",
          content: "会使用 Webpack 和 Vite 进行项目打包",
        },
        { title: "Git", skills: "40", content: "熟练使用 Git 进行代码管理" },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.about {
  max-width: 1000px;
  height: 100%;
  margin: 0 auto;
  color: white;
  font-size: 1.1rem;
  .li {
    margin: 20px 0px;
  }
  .my {
    padding-top: 10px;
    pre {
      word-wrap: break-word;
    }
  }
  h2 {
    margin-bottom: 10px;
  }
  button {
    outline: none;
    cursor: pointer;
    min-width: 108px;
    min-height: 35px;
    background: transparent;
    border: 1px solid white;
    padding: 0px 20px;
    color: white;
    margin: 0px 20px 10px 0px;
  }
  button:hover {
    box-shadow: 0px 0px 3px white;
  }
}
</style>